<template>
  <div>
    <h1>欢迎使用惊喜一餐！</h1>
    <el-divider></el-divider>
    <h2>推荐餐厅</h2>
    <el-row :gutter="20">
      <el-col v-for="restaurant in recommendedRestaurants" :key="restaurant.id" :span="8">
        <el-card
            :body-style="{ padding: '20px' }"
            shadow="hover"
            @click="goToDetail(restaurant.id)"
        >
          <!-- 餐厅图片 -->
          <img :src="restaurant.image" alt="" style="width: 100%; height: 150px; object-fit: cover;" />

          <!-- 餐厅名称和评分 -->
          <h3>{{ restaurant.name }}</h3>
          <p>评分: {{ restaurant.rating }}</p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      recommendedRestaurants: [
        { id: 1, name: '蒸川味', image: '/images/image1.jpg', rating: 4.5 },
        { id: 2, name: '麦当劳', image: '/images/image2.jpg', rating: 4.7 },
        { id: 3, name: '椒麻鸡火锅', image: '/images/image3.jpg', rating: 4.8 },
      ],
    };
  },
  methods: {
    goToDetail(id) {
      this.$router.push(`/restaurant/${id}`);
    },
  },
};
</script>

<style scoped>
/* 如果需要，可以添加样式来调整图片和卡片的布局 */
</style>
